<template>
  <div class="wrap">
    <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">角色管理</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline"  inline >
        <div class="search">
        <FormItem prop="user">
            <Input type="text" v-model="roleName" placeholder="角色名称">
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" icon="ios-search" size='small' @click="getAccoutData">查询</Button>
            <Button type="primary" icon="ios-add-circle-outline" size='small'  @click="edit">新增</Button>
        </FormItem>
        
        </div>
    </Form>
    <Table  stripe border :columns="columns" :data="data" :loading="loading" size="small"></Table>
    <Page ref="page" :total="totalRow" show-total show-elevator @on-change="nextPage" :current="pageNo"></Page>
    <!-- <Modal
        v-model="modal"
        title="资源授权"
        mask-closable="false"
        loading="true"
        @on-ok="ok"
        width="800"
        scrollable='true'
        transfer='false'
        @on-cancel="cancel">
        <Tree ref="tree" :data="treeData" show-checkbox  multiple :render="renderContent"></Tree>
    </Modal> -->
    <Modal
        v-model="auth"
        title="资源授权"
        mask-closable="false"
        loading="true"
        @on-ok="save"
        width="600"
        scrollable='true'
        transfer='false'
        @on-cancel="cancel">
        <q-auth-tree ref="QAuthTree" ></q-auth-tree>
    </Modal>
  </div>
</template>
<script>
import QAuthTree from '../components/subcomponents/QAuthTree'
export default {
  data(){
    return{
      roleName:'',
      loading:true,
      pageNo:1,
      data:[],
      treeData:[],
      modal:false,
      auth:false,
      opRoleId:'',
      //roleId:'',
      columns: [
        {title: '角色名称',key: 'ROLE_NAME'},//fixed: 'left'
        {title: '角色描述',key: 'ROLE_DESC'},
        {title: '操作时间',key: 'CREATE_TIME'},
        {title: '操作',key: 'action',width:150,render: (h, params) => {
            var roldId = params.row.ROLE_ID
            return h('div', {
                attrs: {
                        class: 'table-button'
                    }
                },[
                h('span', {
                    props: {
                        type: 'text',
                        size: 'small'
                    },
                    attrs: {
                        class: 'final-span'
                    },
                    on:{
                        click:()=>{
                            this.$refs.QAuthTree.setRoleId(roldId)
                            this.opRoleId = roldId
                            this.auth = true
                        }
                    }
                }, '授权'),
                h('span', {
                    props: {
                        type: 'text',
                        size: 'small'
                    },
                    attrs: {
                        class: 'first-span'
                    },
                    on:{
                        click:()=>{
                            var roleId = params.row.ROLE_ID
                            this.$router.push({name:'roleEdit',params:{roleId}});
                        }
                    }
                }, '编辑'),
                h('span', {
                    props: {
                        type: 'text',
                        size: 'small'
                    },
                    attrs: {
                        class: 'del-span'
                    },
                    on:{
                        click:()=>{
                            this.$Modal.confirm({
                                title: '确认',
                                content: '您确认要删除该信息吗？',
                                onOk: () => {
                                    this.delete(roldId)
                                },
                                onCancel: () => {
                                    //this.$Message.info('Clicked cancel');
                                }
                            });
                        }
                    }
                }, '删除')
            ]);
        }}
      ],
    }
  },
  created(){
    this.getListData()
  },
  components:{
    'q-auth-tree':QAuthTree
  },
  updated(){
  },
  methods:{
    nextPage(page){
      this.pageNo = page
      this.getAccoutData()
    },
    edit(){
      this.$router.push({name:'roleEdit',params:{roleId:''}});
    },
    getListData(){
      this.$fetch('sys/roleList',
      { roleName:this.roleName,
        pageNo:this.pageNo,
        pageSize:10
      })
      .then(result=>{
        var res = result
        this.loading = false
        if(res.success){
          this.data = res.data.result
          this.totalRow = res.data.totalRow
        }
        console.log('res',res)
      })
    },
    cancel(){
        this.modal = false
    },
    save(){
        var nodes = this.$refs.QAuthTree.getSelectedNodes()
        let ids = Array.from(new Set(nodes));
        ids.splice(ids.findIndex(item => item === '0'), 1)
        this.$post('sys/roleAuthorizeSave',{'roleId':this.opRoleId,'keys':ids.join(',')})
        .then(result=>{
            var res = result
            console.log('saveREs',res)
            if(res.success){
                this.$Message.info({
                    content: '授权成功',
                    duration: 2
                });
                let self = this
                
            } else {
                this.$Message.error({
                    content: '授权失败',
                    duration: 2
                });
            }
            setTimeout(()=>{
                    this.auth = false
                },2000)
            
        })
        .catch(err=>{
            console.log('error',err)
        })
    },
    delete(roleId){
      this.$fetch('sys/roleDelete',{roleId})
      .then(result=>{
        if(result.success){
          this.$Message.info('删除成功')
          setTimeout(()=>{
              this.getListData()
          },1500)
        } else {
          this.$Message.error('删除失败')
        }
        //console.log('res',res)
      })
    }
  },
  
}
</script>
<style lang="scss" scoped>

</style>


